import React, { useRef, useState, useEffect } from 'react'
import './ConcernShop.css'
import { Button, SearchBar, Tabs, Toast, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'


export default function ConcernShop() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    const [shops, setShops] = useState([])
    const getConcernShop = async () => {
        axios.get('http://localhost:3000/getconcernShop').then(
            res => {
                setShops(res.data.data)
                console.log(res.data.data);
            }
        )
    }
    useEffect(() => {
        getConcernShop()
    },[])
  return (
    <div className='concernShop'>
        <div className='concernShop_top'>
            <NavBar onBack={back} ><b>关注商铺</b></NavBar>
        </div>
        <div className='concernShop_content'>
        <SearchBar placeholder='搜索商铺' searchIcon={<img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u106.svg"></img>}
                            style={{
                                width: '99%',
                                '--height': '2.8rem',
                                '--border-radius': '2rem',
                            }} />
            <div className='concernShop_content_list'>
                {
                    shops.map((item,index )=> {
                        return(
                            <div className='concernShop_content_list_item' key={index}>
                                <div className='concernShop_content_list_item_img'>
                                <img src={item.shopid.shopimg} alt="" />
                                <span>{item.shopid.name}</span>
                                </div>
                                <div className='concernShop_content_list_item_btn' onClick={()=>{
                                    navigate('/shop',{
                                        state:{
                                            shopid:item.shopid
                                        }
                                    })
                                }}>
                                    进店
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    </div>
  )
}
